<!-- 首页 -->
<template>
	<view class="wrapper">
		<view class="self-formitem"
			:class="{'formitem-focus':show ,'formitem-bottom-border':border==='bottom','formitem-border':border==='around'}"
			@click="handleSelect">
			<view class="">
				<view class="line-height16">
					<image src="/static/images/login/required.png" class="width-8" mode="widthFix" v-if="required">
					</image>
					<text class="f-s12" style="padding-left: 4rpx;color: #585D66;">{{title}}</text>
				</view>
				<view class="m-t3" style="line-height: 42rpx;">
					<text v-if="!value" class="placeholder-style">{{placeholder}}</text>
					<slot name="value">
						<text v-if="value">{{value}}</text>
					</slot>
				</view>
			</view>
			<image src="/static/images/login/arrow-right.png" class="width-20" mode="widthFix"></image>
		</view>

		<u-popup :show="show" round="40rpx" mode="bottom" :mask="true" @close="handleClose" @touchmove.stop.prevent>
			<view class="popup radius-20 bg-white">
				<view class="flex justify-between align-center">
					<view class="">
						<text class="f-s17 f-w500">{{pickerTitle}}</text>
						<text class="f-s14 m-l10 text-gray">{{pickerSubtitle}}</text>
					</view>
					<image src="/static/images/login/close.png" class="width-24" mode="widthFix" @click="handleClose">
					</image>
				</view>
				<slot :data="isConfirm"></slot>
				<slot name="button">
					<view class="self-btn margin-center" hover-class="pressed" @click="handleConfirm">
						<text>确定</text>
					</view>
				</slot>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "",
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			pickerTitle: {
				type: String,
				default: ''
			},
			pickerSubtitle: {
				type: String,
				default: ''
			},
			required: {
				type: Boolean,
				default: true
			},
			border: {
				type: String,
				default: 'around'
			},
			placeholder: {
				type: String,
				default: ''
			},
			readonly: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				isConfirm: false, // 点击确认按钮
			}
		},
		watch: {
			visible: {
				handler(val) {
					if (this.readonly || this.disabled) return
					this.show = val
				}
			}
		},
		computed: {
			checkInput() {
				return this.readonly || this.disabled
			}
		},
		methods: {
			handleConfirm() {
				this.show = false
				this.isConfirm = true
				this.$emit('confirm')
				this.$emit('update:visible', false)
			},
			handleClose() {
				this.show = false
				this.isConfirm = false
				this.$emit('update:visible', false)
			},
			handleSelect() {
				if (this.checkInput) return
				this.show = true
				this.isConfirm = false
				this.$emit('open')
				this.$emit('update:visible', true)
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		.self-formitem {
			width: 100%;
			// height: 108rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 14rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.placeholder-style {
				font-weight: 400;
				font-size: 30rpx;
				color: #B2B8C1;
				line-height: 42rpx;
			}

			input {
				color: #202020;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}

		.formitem-border {
			border: 1rpx solid #DDE0E6;
		}

		.formitem-bottom-border {
			border: none;
			border-radius: 0;
			border-bottom: 1rpx solid #DDE0E6;
		}

		.formitem-focus {
			border-width: 4rpx;
			border-color: #202020;
		}

		.readonly {
			pointer-events: none;
		}

		.disabled {
			pointer-events: none;
		}

		.popup-container {
			position: fixed;
			height: 100vh;
			width: 100vw;
			top: 0;
			left: 0;
		}

		.popup {
			padding: 32rpx;

		}

	}

	// #ifdef APP-IOS
	::v-deep .uni-scroll-view {
		-webkit-overflow-scrolling: auto;
	}

	// #endif
	::v-deep .m-popup {
		width: 100vw !important;
		height: 100vh !important;
		position: fixed !important;
		top: 0;
		left: 0;
		// z-index: 9999;
		background-color: rgba(0, 0, 0, 0.3);

		.popup {
			padding: 32rpx;
			background-color: #fff;
		}
	}
</style>